<!--{__NOLAYOUT__}-->
{include file="../application/admin/view/template/header.html" /}

<body>
<div class="main">
    <div>
        <button onclick="add('{:url('/admin/menu/add');}')" class="layui-btn">添加菜单</button>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</body>

<script src="__STATIC__/style/js/common.js"></script>
<script type="text/html" id="icon-temp">
    <!-- 图标模板 -->
    <i class="iconfont">{{d.icon}}</i>
</script>
<script type="text/html" id="show-switch">
    <!-- 是否显示按钮开关模板 -->
    <input type="checkbox" name="is_show" value="{{d.menu_id}}" lay-skin="switch" lay-text="显示|取消"
           lay-filter="is_showSwitch" {{ d.is_show== 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="lock-switch">
    <!-- 是否禁用按钮开关模板 -->
    <input type="checkbox" name="is_lock" value="{{d.status}}" lay-skin="switch" lay-text="正常|禁用"
           lay-filter="is_lockSwitch" {{ d.status== 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table
            , form = layui.form
            , layer = layui.layer;

        table.render({
            elem: '#test'
            , url: '/admin/menu/index/'//请求地址
            //,initSort: {field: 'menu_id', type: 'desc'}
            , where: {field: 'menu_id', order: 'asc'}
            , method: 'POST'//请求方式
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , limit: 30//请求数据条数
            , height: 'full-65'//高度
            , loading: true//显示加载提示
            , page: false //开启分页
            , cols: [[
                {field: 'menu_id', title: '菜单ID', align: 'center', sort: true},
                {field: 'parent_id', title: '父级ID', align: 'center'},
                {field: 'icon', title: '菜单图标', align: 'center', templet: '#icon-temp'},
                {field: 'title', title: '菜单名称'},
                {field: 'url', title: '访问地址', align: 'center'},
                {field: 'sort_id', title: '排序ID', align: 'center', sort: true},
                // {field: 'create_time', title: '创建时间', align: 'center'},   //创建时间和修改时间没必要展示
                // {field: 'update_time', title: '修改时间', align: 'center'},   //创建时间和修改时间没必要展示
                {field: 'is_show', title: '是否显示', align: 'center', templet: '#show-switch'},
                {field: 'status', title: '状态', align: 'center', templet: '#lock-switch'},
                {title: '操作', fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo'}
            ]]
            , limits: $.common.tableLimits()
        });

        //监听排序
        table.on('sort(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('test', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
        });

        //监听编辑
        table.on('edit(test)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });

        //监听是否显示开关
        form.on('switch(is_showSwitch)', function (obj) {
            var data = {menu_id: this.value, is_show: obj.elem.checked ? 1 : 0};
            $.post("/admin/menu/show", data, function (result) {
                layer.msg(result.msg);
            })
        });

        //监听工具条
        table.on('tools(test)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del' ://删除
                    layer.confirm('真的删除行么', function (index) {
                        console.log(data);
                        $.post("/admin/menu/del", data, function (result) {
                            layer.msg(result.msg);
                            if (result.status) {
                                obj.del();
                                layer.close(index);
                            } else {
                                window.location.reload();
                            }
                        });
                    });
                    break;
                case 'edit'://编辑
                    layer.alert('编辑行：<br>' + JSON.stringify(data));
                    break;
                default :
                    break;
            }
        });
    });

    //新增菜单
    function add(url) {
        layerOpen(url, '添加菜单');
    }

    //编辑菜单
    function edit(url) {
        layerOpen(url, '编辑菜单');
    }

    function layerOpen(url, title) {
        layer.open({
            type: 2,
            title: title,
            shadeClose: true,
            shade: 0.6,
            area: ['100%', '100%'],
            content: url
        });
    }

</script>